{extend name="public:index"/} {block name="title"}{:sysconf('title')}{/block} {block name="content"}
<section class="shouhuobox">
    <div class="top">
        <p class="p1">
            <a href="javascript:history.back(-1)"></a>
        </p>
        <p class="p2">绑定银行卡</p>
        <p class="p3"></p>
    </div>
    <div style="height:2rem;"></div>
    <div class="ddivbox">
        {if condition="$list"} {foreach name="$list" item="vo"}
        <div class="ddbox">
            <p class="p2">
                <b>{$vo['name']}</b><span>{$vo['account']}</span>
            </p>
            <p class="p4" data-id="{$vo['id']}"></p>
        </div>
        {/foreach} {else/}
        <div class="nofind"><img src="__INDEX__/images/nosp.png" alt="">
            <p>暂时没有记录</p>
        </div>
        {/if}
    </div>
    <div class="xinzeng"><a href="javascript:;">新增银行卡</a></div>
    <!-- <div class="submit"><input type="submit" name=""></div> -->
</section>
<section class="xinzbox xinzbox1">
    <div class="top">
        <p class="p1">
            <a href="javascript:;"></a>
        </p>
        <p class="p2">新增银行卡</p>
        <p class="p3"></p>
    </div>
    <p class="xiug">
        <span class="span1">姓名</span>
        <span class="span2"><input class="xingm" name="name" style="outline:none" placeholder="姓名" value="" ></span>
    </p>
    <p class="xiug">
        <span class="span1">银行卡号</span>
        <span class="span2"><input type="number" class="shouj" name="account" style="outline:none" placeholder="银行卡号"></span>
    </p>
    <p class="xiug">
        <span class="span1">开户行</span>
        <span class="span2 span3"><input class="jutd" name="bank" style="outline:none" placeholder="开户行"></span>
    </p>
    <div class="submit"><input type="button" value="新增"></div>
</section>
<script type="text/javascript">
    $('.shouhuobox .xinzeng').click(function() {
        $('.xinzbox1').stop().animate({
            right: 0
        }, 500);
    });
    $('.xinzbox1 .top .p1').click(function() {
        $('.xinzbox1').stop().animate({
            right: -100 + '%'
        }, 500);
    });
    /*删除*/
    $(document).on("click", ".shouhuobox .ddivbox .ddbox .p4", function() {
        var obj = this;
        var bankId = $(obj).data('id');
        $.ajax({
            url: "{:url('User/delBank')}",
            type: "POST",
            data: {
                'bankId': bankId
            },
            dataType: "JSON",
            success: function(data) {
                if (data.code == 0) {
                    $(obj).parent('.ddbox').remove();
                    layer.msg('解绑成功');
                } else {
                    layer.msg(data.msg, {
                        'icon': 5
                    });
                }
            },
            error: function() {
                layer.msg("网络延迟，发送失败", {
                    icon: 5
                });
            }
        });
    });
    $(document).on("click", ".shouhuobox .ddivbox .ddbox .p2", function() {
        $('.shouhuobox .ddivbox .ddbox .p2').removeClass('canp2');
        $(this).addClass('canp2');
    });
    /*添加*/
    $('.xinzbox1 .submit').click(function() {
        var xingm = $('.xingm').val();
        var shouj = $('.shouj').val();
        var jutd = $('.jutd').val();
        if (xingm == '' || shouj == '' || jutd == '') {
            layer.msg('请填写完整信息');
            return;
        }
        $.ajax({
            url: "{:url('User/addBank')}",
            type: "POST",
            data: {
                'name': xingm,
                'account': shouj,
                'bank': jutd
            },
            dataType: "JSON",
            success: function(data) {
                if (data.code == 0) {
                    layer.msg('绑定成功');
                    $('.xinzbox').stop().animate({
                        right: -100 + '%'
                    }, 500);
                    if ($(".shouhuobox .ddivbox").html() !== '') {
                        $(".nofind").hide();
                    }
                    var str = "<div class='ddbox'><p class='p2'><b>" + xingm + "  " + shouj + "</b><span>" + jutd + "</span></p><p class='p4' data-id='" + data.data + "'></p></div>"
                    $(".shouhuobox .ddivbox").append(str);
                } else {
                    layer.msg(data.msg, {
                        'icon': 5
                    });
                }
            },
            error: function() {
                layer.msg("网络延迟，发送失败", {
                    icon: 5
                });
            }
        });
    });
</script>{/block}